<template>
	<view class="receiveSure">
		<section class="cart margin3">
			<goodsCart :sendData="sendData" :status="status" :tabState="tabState"></goodsCart>
			<!-- <button class="user-set-btn btn" type="primary">确认接单</button> -->
		</section>
		<view class="tableBox margin3"><orderNum :numObj="numObj"></orderNum></view>
		<!-- 不合格的 展示 begin -->
		<!-- <view class="margin3" v-if="status == '不合格'">
			<u-collapse>
				<u-collapse-item @change="clickCell" :title="item.head" v-for="(item, index) in itemList" :key="index" :open="item.open">{{ item.body }}</u-collapse-item>
			</u-collapse>
			<u-calendar v-model="showDate" @change="changeDate" :max-date="dateMax" :mode="mode"></u-calendar>
		</view> -->
		<view class="margin3" v-if="status == '不合格'">
			<u-collapse>
				<u-collapse-item :title="item.head" v-for="(item, index) in filedList" :key="index" :open="item.open">{{ item.body }}</u-collapse-item>
			</u-collapse>
		</view>
		<view class="marbot margin3" v-if="status == '不合格'">
			<u-row gutter="16" justify="around">
				<u-col span="3"><u-button type="primary" shape="circle" size="medium" @click="factoryRepaire">云工厂返修</u-button></u-col>
				<u-col span="3" offset="5"><u-button type="primary" shape="circle" @click="selfrepaire" size="medium">自修</u-button></u-col>
			</u-row>
		</view>
		<!-- 不合格的展示 over -->

		<!-- 确认抢单 表格和 btn begin -->
		<view class="margin3" v-if="status == '确认接单' || status == '抢单' || tabState == 1 || tabState == 2 || status == '已报名'">
			<orderTable :tableData="tableData" :tabState="tabState"></orderTable>
		</view>
		<view class="marbot margin3" v-if="status == '确认接单'">
			<u-row gutter="16" justify="around">
				<u-col span="3"><u-button type="primary" size="medium" shape="circle"  @click="sureReceive">确定接单</u-button></u-col>
				<u-col span="3" offset="5"><u-button size="medium" type="primary" shape="circle"  @click="noSure">　拒单　</u-button></u-col>
			</u-row>
		</view>
		<!-- 确认抢单  over -->
		<!-- 抢单 按钮-->
		<view class="margin3" v-if="status == '抢单'"><u-button type="primary" shape="square" :custom-style="btnStyle" @click="snatch">抢单</u-button></view>
		<!-- 抢单按钮 结束 -->
		<!-- 退单 开始 -->
		<view class="margin3" v-if="status == '退单'">
			<div>
				如果需要自己进行返修，请与 姓名：{{ sendData.operateUser ? sendData.operateUser : '--' }} 手机：{{
					sendData.phone ? sendData.phone : '--'
				}}联系，取回退单工件，返修完成可直接扫码送检。若报损，请单击报损按钮操作
			</div>
			<u-button type="primary" shape="square" :custom-style="btnStyle" @click="reportFail">报损</u-button>
		</view>
		<!-- 退单结束 -->

		<!-- 进行中详情 begin-->
		<view class="margin3 textCenter" v-if="tabState == 1">
			<view>
				<u-link href="" v-if="sendData.cutFlag" color="red" font-size="28rpx">存货地址：{{ sendData.expressNo }}</u-link>
			</view>
			<u-button type="warning" :custom-style="btnStyle" size="medium" @click="applyDelay">申请延期</u-button>
			<u-button type="primary" v-if="sendData.cutFlag" size="medium" @click="receiveCut">领取裁片</u-button>
		</view>
		<!--进行中详情 over -->
		<!-- 页面的total 提示  -->
		<u-toast ref="uToast" />
		<!-- 退单的点击报损 弹窗 begin -->
		<u-popup v-model="showReasonList" mode="bottom" border-radius="14">
			<view style="padding: 80rpx;" class="textCenter">
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox @change="checkboxChange" v-model="item.checkd" v-for="(item, index) in showChekList" :key="index" :name="item.itemValue">
						{{ item.itemValue }}
					</u-checkbox>
				</u-checkbox-group>
				<u-button type="primary" :custom-style="btnStyle" @click="submitReportBtn" size="medium">提交</u-button>
			</view>
		</u-popup>
		<!-- 退单的点击报损 弹窗 over -->
	</view>
</template>

<script>
import goodsCart from './components/goodsCart.vue';
import orderNum from './components/workOrderNum.vue';
import orderTable from './components/orderDetail.vue';
export default {
	components: {
		goodsCart,
		orderNum,
		orderTable
	},
	data() {
		return {
			showChekList: [],
			checkdList: [],
			showReasonList: false,
			btnStyle: {
				margin: '20rpx'
			},
			tabState: '',
			tableData: [],
			numObj: {},
			itemList: [{ head: '返修完成时间', open: false, body: '' }],
			filedList: [{ head: '不合格商品', open: true, body: '无' }],
			// dateMax: '2099-01-01',
			// showDate: false,
			// mode: 'date',
			sendData: {},
			status: '',
			workNo: ''
			// selectdate: ''
		};
	},
	methods: {
		submitReportBtn() {
			console.log('click submitRepotrbtn');
			this.$store.dispatch('scrapWorkOrder', { unitNoList: this.sendData.backUnitNo, reason: this.checkdList }).then(res => {
				if (res.data.errorCode === 0) {
					console.log(res.data);
					this.showToast();
				}
			});
		},
		checkboxChange(e) {
			console.log(e);
		},
		checkboxGroupChange(e) {
			console.log(e);
			this.checkdList = e;
		},
		reportFail() {
			this.showReasonList = true;
		},
		receiveCut() {
			console.log('///领取裁片');
			this.$store.dispatch('receiveSliceCutting', { workNo: this.workNo }).then(res => {
				if (res.data.errorCode === 0) {
					console.log(res.data);
					uni.switchTab({
						url: '/pages/workOrder/workOrder'
					});
				}
			});
		},
		applyDelay() {
			console.log('...');
			let url = './applyDelay?workNo=' + this.workNo;
			uni.navigateTo({
				url: url
			});
		},
		getDay(dateTime) {
			var EndTime = new Date(dateTime);
			// 当前系统时间
			var NowTime = new Date();
			var t = EndTime.getTime() - NowTime.getTime();
			var d = Math.floor(t / 1000 / 60 / 60 / 24);
			var html = d + ' 天';
			return html;
		},
		showToast() {
			this.$refs.uToast.show({
				title: '成功',
				type: 'success',
				url: ''
			});
			uni.navigateBack({
				delta: 1
			});
		},
		snatch() {
			this.$store.dispatch('factorySnatchWorkOrder', { workerNo: this.workNo }).then(res => {
				if (res.data.errorCode === 0) {
					console.log(res.data);
					this.showToast();
				}
			});
		},
		sureReceive() {
			this.conformOrder(this.workNo, 1);
		},
		noSure() {
			this.conformOrder(this.workNo, 0);
		},
		conformOrder(number, type) {
			this.$store.dispatch('confirmedWorkOrder', { workerNo: number, type: type }).then(res => {
				if (res.data.errorCode === 0) {
					console.log(res.data);
					uni.switchTab({
						url: '/pages/workOrder/workOrder'
					});
				}
			});
		},
		// clickCell() {
		// 	console.log('///');
		// 	this.showDate = true;
		// },
		// changeDate(e) {
		// 	console.log(e);
		// 	this.selectdate = e.result;
		// },
		getworkDetail() {
			//进入页面获取详情数据
			this.$store.dispatch('getUnitWorkOrderDetail', { workNo: this.workNo }).then(res => {
				if (res.data.errorCode === 0) {
					console.log(res.data);
					console.log(res.data.data);
					let result = res.data.data;
					this.sendData = result;
					this.sendData.upDay = this.getDay(result.replyDeliveryDate);
					let tebObj = result.cropRatio;
					this.status = this.status;
					this.numObj = result.workStatus;
					this.tableData = [
						{
							s: tebObj.s + '/' + tebObj.s * result.suitCount,
							m: tebObj.m + '/' + tebObj.m * result.suitCount,
							l: tebObj.l + '/' + tebObj.l * result.suitCount,
							xl: tebObj.xl + '/' + tebObj.xl * result.suitCount,
							xxl: tebObj.xxl + '/' + tebObj.xxl * result.suitCount,
							xxxl: tebObj.xxxl + '/' + tebObj.xxxl * result.suitCount
						}
					];
				}
			});
		},
		getDict() {
			this.$store.dispatch('getStatusDict').then(res => {
				if (res.data.errorCode === 0) {
					console.log(res.data);
				}
			});
		},
		getUnList() {
			this.$store.dispatch('getUnitList', { workeNo: this.workNo, status: 6 }).then(res => {
				if (res.data.errorCode === 0) {
					console.log(res.data);
					let arr = [];
					let reason = res.data.data[0].reason ? res.data.data[0].reason : '无;';
					res.data.data.forEach(item => {
						arr.push(item.unitNo + ';');
					});
					this.filedList[0].body = '不合格原因：' + reason + arr;
					console.log(this.filedList);
				}
			});
		},
		//自修
		selfrepaire() {
			this.$store.dispatch('selfStudyWorkOrder', { workNo: this.workNo }).then(res => {
				if (res.data.errorCode === 0) {
					console.log(res.data);
					uni.switchTab({
						url: '/pages/workOrder/workOrder'
					});
				}
			});
		},
		//云工厂返修
		factoryRepaire() {
			this.$store.dispatch('repairFactoryWorkOrder', { workNo: this.workNo }).then(res => {
				if (res.data.errorCode === 0) {
					console.log(res.data);
					uni.switchTab({
						url: '/pages/workOrder/workOrder'
					});
				}
			});
		}
	},

	onLoad(option) {
		console.error(option);
		this.workNo = option.workNo;
		this.status = option.status;
		this.tabState = option.tabState;
		let titles = '';
		this.getworkDetail();
		if (this.status == '不合格') {
			titles = '不合格详情';
			this.getUnList();
		} else if (this.status == '退单') {
			titles = '退单详情';
		} else if (this.tabState == 1) {
			titles = '进行中详情';
		} else if (this.status == '确认接单') {
			titles = '确认接单详情';
		} else if (this.status == '抢单') {
			titles = '抢单详情';
		} else if (this.status == '已报名') {
			titles = '已报名详情';
		} else {
			titles = '详情';
		}
		uni.setNavigationBarTitle({
			title: titles
		});
		this.$store.dispatch('getDictItemList', { dictCode: 'scrapReason' }).then(res => {
			if (res.data.errorCode === 0) {
				console.log(res.data);
				let list = res.data.data;
				list.forEach((item, index) => {
					item.checkd = false;
					return item;
				});
				this.showChekList = list;
			}
		});
	}
};
</script>

<style lang="scss" scoped>
.receiveSure {
	background: #f8f8f8;
}
.marbot {
	margin: 60rpx;
}
.textCenter {
	text-align: center;
}
.margin3 {
	margin: 30rpx;
	background: #ffffff;
	padding: 24rpx 30rpx;
	border-radius: 20rpx;

	.hedTit {
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}
}
</style>
